<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <areas :areas="treeAreas" :area-type="areaType"  v-on:handleNodeClick="onHandleNodeClick" />
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card>
          <div class="filter-container">
            <el-select v-model="dateType" class="filter-item" style="margin-left: 20px;"  :clearable="false" >
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker
              style="margin-left: 20px;"
              class="filter-item"
              v-model="listQuery.date"
              :type="dateType"
              :clearable="false"
              placeholder="选择时间">
            </el-date-picker>
            <el-button   style="margin-left:40px" class="filter-item" type="primary" icon="el-icon-search" @click="fetchList">
              查询
            </el-button>
            <el-button :loading="exportLoading" style="margin-left:20px" class="filter-item" type="primary" icon="el-icon-download" @click="exportData">
              营收导出
            </el-button>
          </div>
          <div class="app-container">
            <el-table
              :key="tableKey"
              v-loading="listLoading"
              :data="list"
              ref="waterTable"
              :row-style="{height:40+'px'}"
              :cell-style="{padding:0+'px'}"
              border
              fit
              stripe
              highlight-current-row
              height="700"
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                label="#"
                align="center"
                width="50">
              </el-table-column>
              <el-table-column label="姓名" align="center" >
                <template v-slot="{row}">
                  <span>{{row.device.customer ?  row.device.customer.customer_name:'未知'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="类型" align="center"  >
                <template v-slot="{row}">
                  <span>{{ formatType(row.device.customer ? row.device.customer.customer_type:0)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="终端编号" align="center" >
                <template v-slot="{row}">
                  <span>{{row.device.terminal_number }}</span>
                </template>
              </el-table-column>
              <el-table-column label="水司号" align="center" >
                <template v-slot="{row}">
                  <span>{{row.device.customer ? row.device.customer.refer_number:'' }}</span>
                </template>
              </el-table-column>
              <el-table-column  label="地址"  align="center">
                <template v-slot="{row}">
                  <span>{{row.device.install_address}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="水费(元)"  align="center">
                <template v-slot="{row}">
                  <span>{{row.price_amount.toFixed(2)}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="充值金额(元)"  align="center">
                <template v-slot="{row}">
                  <span>{{row.total_recharge.toFixed(2)}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="用水量(m³)"  align="center">
                <template v-slot="{row}">
                  <span>{{row.amount}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="起始数(m³)"  align="center">
                <template v-slot="{row}">
                  <span>{{row.start_amount}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="终止数(m³)"  align="center">
                <template v-slot="{row}">
                  <span>{{row.record ? row.record.positive_volume : 0.00}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="计费模式"  align="center">
                <template v-slot="{row}">
                  <span>{{formatChargeModel(row)}}</span>
                </template>
              </el-table-column>
              <el-table-column  label="单价(元)"  align="center">
                <template v-slot="{row}">
                  <span>{{formatUnitPrice(row)}}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :limit.sync="listQuery.pageSize" :page.sync="listQuery.page" :total="total"
                        @pagination="fetchList"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree'
import Pagination from '@/components/Pagination'
import {getAreaTree} from "@/api/area";
import {checkPermission} from "@/utils/permission";
import moment from "moment";
import {customerFeeReport} from "@/api/analysis";
import {getCustomerTypeText} from "@/utils";
import {exportExcel} from "@/utils/excel";

export default {
  name: 'CustomerFeeReport',
  components:{areas,Pagination},
  data() {
    return {
      tableKey:0,
      exportLoading:false,
      listLoading:true,
      list:[],
      total:0,
      areaType:2,
      dateType:'month',
      listQuery:{
        date: null,
        code:'',
        is_contains_sub: this.$store.getters.showSubData,
        page:1,
        pageSize:20
      },
      treeAreas:[],
      types:[
        { label: '年报', value: 'year'},
        { label: '月报', value: 'month' },
        { label: '日报', value: 'date' },
      ],
    }
  },
  created() {
    this.listQuery.date =  moment()
    this.fetchList()
    this.getAreaTree()
  },
  methods: {
    checkPermission,
    getAreaTree(type){
      getAreaTree({type:2,is_contains_sub:this.$store.getters.showSubData}).then(response => {
        this.treeAreas = response.data
      })
    },
    onHandleNodeClick:function (data) {
      if(this.listQuery.code !== data.code){
        this.listQuery.code = data.code
        this.fetchList()
      }
    },
    fetchList(){
      this.listLoading = true
      let data = Object.assign({},this.listQuery)
      const t =  moment(data.date)
      if(this.dateType === 'year'){
        data.date = t.format('YYYY')
      }
      if(this.dateType === 'month'){
        data.date = t.format('YYYY-MM')
      }
      if(this.dateType === 'date'){
        data.date = t.format('YYYY-MM-DD')
      }
      customerFeeReport(data).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    formatType(value){
      return getCustomerTypeText(value)
    },
    formatChargeModel(row){
      if(!row.device.price_rate) {
        return '未配价'
      }
      if(row.device.price_rate.billing_model === 1){
        return '固定'
      }else{
        return '阶梯'
      }
    },
    formatUnitPrice(row){
      if(!row.device.price_rate) {
        return '未配价'
      }
      if(row.device.price_rate.billing_model === 1){
        return row.device.price_rate.price_rate[0].price
      }else{
        const priceList = []
        const names = ['阶梯一','阶梯二','阶梯三','阶梯四','阶梯五','阶梯六','阶梯七','阶梯八','阶梯九','阶梯十']
        for(let i=0;i<row.device.price_rate.price_rate.length;i++){
          priceList.push(names[i]+'：'+row.device.price_rate.price_rate[i].price)
        }
        return priceList.join('<br>')
      }
    },
    resetQueryParams(){
      this.listQuery = {
        date: null,
        code:'',
        page:1,
        pageSize:20
      }
    },
    exportData(){
      this.exportLoading = true
      let data = Object.assign({},this.listQuery)
      const t =  moment(data.date)
      if(this.dateType === 'year'){
        data.date = t.format('YYYY')
      }
      if(this.dateType === 'month'){
        data.date = t.format('YYYY-MM')
      }
      if(this.dateType === 'date'){
        data.date = t.format('YYYY-MM-DD')
      }
      data.page = 1
      data.pageSize = 10000

      customerFeeReport(data).then(response => {
        if (response.code === 20000) {
          const headers = ['姓名','类型','终端编号','水司号','地址','用水量','水费','充值金额','起始数','终止数','计费模式','单价']
          const data = response.data.list.map(row => (
            {
            姓名: row.device ?  (row.device.customer ?  row.device.customer.customer_name:'未知'):'未知',
            类型: row.device? this.formatType(row.device.customer ? row.device.customer.customer_type:0):'未知',
            终端编号: row.device ? row.device.terminal_number:'未知',
            水司号: row.device? (row.device.customer ? row.device.customer.refer_number:'未知') : '未知',
            地址: row.device ? row.device.install_address : '-',
            用水量: row.amount,
            水费: row.price_amount,
            充值金额: row.total_recharge,
            起始数: row.start_amount,
            终止数: row.record? row.record.positive_volume : 0.00,
            计费模式: row.device? this.formatChargeModel(row):'未知',
            单价: row.device? this.formatUnitPrice(row):'未知',
          }))
          exportExcel(data, headers, '水费报表')
          setTimeout(() => {
            this.exportLoading = false
          }, 1.5 * 1000)
        }
      })
    }
  }
}
</script>
